<template>
	<div>
		<!-- <headerNave :nva-datas="navDatas" v-on:backNav="backNav"></headerNave> -->
		<div class="list padding-across-10">
			<p class="panel_title">区域列表</p>
			<el-tree :show-overflow-tooltip="true" style="height: 450px;overflow: auto;border: 0" ref="tree" :data="districtsDatas" :props="defaultProps" node-key="DistrictKeyId" :current-node-key="currentNodeKey" :highlight-current="true" :default-expanded-keys="defaultExpandedKeys" :expand-on-click-node="false" @node-click="handleNodeClick">
			</el-tree>
		</div>
		<div class="operation-list">
			<el-tabs v-model="activeName" @tab-click="handleClick" v-loading="loading" element-loading-text="拼命加载中">
				<el-tab-pane label="设备故障" name="failure">
					<div>
						<div style="display: flex;float: left">
							<headerOpreate style="float: left" :opreate-datas="failureOpreateDatas" v-on:executeAction="executeAction"></headerOpreate>
						</div>
						<div style="text-align: right;">
							<span style="font-size: 13px;font-weight: bold">{{$t('message.start')}}</span>
							<el-date-picker :editable="false" :clearable="false" size="small" type="date" v-model="failureStartTime" placeholder="选择起始日期" @change="changeFailureStartTime"></el-date-picker>
							<span style="font-size: 13px;font-weight: bold">{{$t('message.end')}}</span>
							<el-date-picker :editable="false" :clearable="false" size="small" type="date" v-model="failureEndTime" placeholder="选择结束日期" @change="changeFailureEndTime"></el-date-picker>
							
						</div>

					</div>
					<div>
						<div style="float: left;">
							<span style="font-size: 13px;font-weight: bold">区域设备</span>
							<el-select style="margin-top: 2px;width: 110px" size="small" v-model="failureDevice" placeholder="请选择设备" @change="selectFailureDevice">
								<el-option v-for="item in tableData" :key="item.sn" :label="item.name" :value="item.sn">
								</el-option>
							</el-select>
							<span style="font-size: 13px;font-weight: bold">关键字</span>
							<el-input style="width: 200px" v-model="failureKeyWord" size="small" placeholder="故障描述关键字">
								<el-button slot="append" icon="search" @click="getByFailureKeyWord"></el-button>
							</el-input>
						</div>
						<div class="block" style="text-align:right;float: right;padding: 1px 0">
							<el-pagination @size-change="handleFailureSizeChange" @current-change="handleFailureCurrentChange" :current-page="failureCurrentPage" :page-sizes="[10, 20, 30, 40, 50]" :page-size="failurePageSize" layout="total,sizes, prev, pager, next, jumper" :total="failureTotalSize">
							</el-pagination>
						</div>
					</div>
					<el-table border :data="failureDatas" @selection-change="handleFailureSelectionChange">
						<el-table-column :show-overflow-tooltip="true" type="selection"></el-table-column>
						<el-table-column :show-overflow-tooltip="true" label="设备" align="center" prop="name"></el-table-column>
						<el-table-column :show-overflow-tooltip="true" label="故障代码" align="center" prop="code"></el-table-column>
						<el-table-column :show-overflow-tooltip="true" label="故障时间" align="center" prop="time"></el-table-column>
						<el-table-column :show-overflow-tooltip="true" label="故障描述" align="center" prop="desc">
						</el-table-column>
					</el-table>
					<div class="block" style="text-align:right;margin-bottom:60px;padding-top: 1px">
						<el-pagination @size-change="handleFailureSizeChange" @current-change="handleFailureCurrentChange" :current-page="failureCurrentPage" :page-size="failurePageSize" :page-sizes="[10, 20, 30, 40, 50]" layout="total,sizes, prev, pager, next, jumper" :total="failureTotalSize">
						</el-pagination>
					</div>
				</el-tab-pane>
				<el-tab-pane label="应用异常" name="appException">
					<div>
						<div style="float: left">
							<headerOpreate style="float: left" :opreate-datas="expOpreateDatas" v-on:executeAction="executeAction"></headerOpreate>
						</div>
						<div style="text-align: right;">
							<span style="font-size: 13px;font-weight: bold">{{$t('message.start')}}</span>
							<el-date-picker :editable="false" :clearable="false" size="small" type="date" v-model="expStartTime" placeholder="选择起始日期" @change="changeExpStartTime"></el-date-picker>
							<span style="font-size: 13px;font-weight: bold">{{$t('message.end')}}</span>
							<el-date-picker :editable="false" :clearable="false" size="small" type="date" v-model="expEndTime" placeholder="选择结束日期" @change="changeExpEndTime"></el-date-picker>
						</div>
					</div>
					<div>
						<div style="float: left;">
							<span style="font-size: 13px;font-weight: bold">区域设备</span>
							<el-select style="margin-top: 2px;width: 110px" size="small" v-model="ExpDevice" placeholder="请选择设备" @change="selectExpDevice">
								<el-option v-for="item in tableData" :key="item.sn" :label="item.name" :value="item.sn">
								</el-option>
							</el-select>
							<span style="font-size: 13px;font-weight: bold">关键字</span>
							<el-input style="width: 200px" v-model="exceptionKeyWord" size="small" placeholder="异常描述关键字">
								<el-button slot="append" icon="search" @click="getByExceptionKeyWord"></el-button>
							</el-input>
						</div>
						<div class="block" style="text-align:right;float: right;padding: 1px 0">
							<el-pagination @size-change="handleExpSizeChange" @current-change="handleExpCurrentChange" :current-page="expCurrentPage" :page-sizes="[10, 20, 30, 40, 50]" :page-size="expPageSize" layout="total,sizes, prev, pager, next, jumper" :total="expTotalSize">
							</el-pagination>
						</div>
					</div>
					<el-table border :data="expDatas" @selection-change="handleExpSelectionChange">
						<el-table-column :show-overflow-tooltip="true" type="selection"></el-table-column>
						<el-table-column :show-overflow-tooltip="true" label="设备" align="center" prop="name"></el-table-column>
						<el-table-column :show-overflow-tooltip="true" label="应用名称" align="center" prop="appname"></el-table-column>
						<el-table-column :show-overflow-tooltip="true" label="应用版本" align="center" prop="appver"></el-table-column>
						<el-table-column :show-overflow-tooltip="true" label="异常时间" align="center" prop="time"></el-table-column>
						<el-table-column :show-overflow-tooltip="true" label="异常描述" align="center" prop="desc">
							<!-- <template slot-scope="scope" class="tool-bottom">
								<el-popover trigger="hover" placement="top" width="500">
									<div style="overflow:auto">{{ scope.row.desc }}</div>
									<div slot="reference" class="name-wrapper">
										<el-tag type="primary">{{ '详情' }}</el-tag>
									</div>
								</el-popover>
							</template> -->
						</el-table-column>
					</el-table>
					<div class="block" style="text-align:right;margin-bottom:60px">
						<el-pagination @size-change="handleExpSizeChange" @current-change="handleExpCurrentChange" :current-page="expCurrentPage" :page-sizes="[10, 20, 30, 40, 50]" :page-size="expPageSize" layout="total, sizes, prev, pager, next, jumper" :total="expTotalSize">
						</el-pagination>
					</div>
				</el-tab-pane>
			</el-tabs>
		</div>
	</div>
</template>
<script>
	import $ from 'jquery'
	import headerNave from '../../../../components/headerNave'
	import headerOpreate from '../../../../components/headerOpreate'
	import { GloabFun, Animation, HttpServer } from '../../../../assets/js/common.js'

	const date = new Date();

	export default {
		components: {
			headerNave,
			headerOpreate
		},
		data() {
			Date.prototype.format = function(format) {
				var date = {
					"M+": this.getMonth() + 1,
					"d+": this.getDate()
				};
				if(/(y+)/i.test(format)) {
					format = format.replace(RegExp.$1, (this.getFullYear() + '').substr(4 - RegExp.$1.length));
				}
				for(var k in date) {
					if(new RegExp("(" + k + ")").test(format)) {
						format = format.replace(RegExp.$1, RegExp.$1.length == 1 ?
							date[k] : ("00" + date[k]).substr(("" + date[k]).length));
					}
				}
				return format;
			}
			return {
				failureKeyWord: '', //故障描述关键字
				exceptionKeyWord: '', //设备异常关键字
				loading: false,
				failureDevice: '',
				ExpDevice: '',
				currentNodeKey: null,
				defaultExpandedKeys: [],
				districtsDatas: [],
				offlineTotal: '',
				onlineTotal: '',
				failureCurrentPage: 1,
				failurePageSize: 10,
				failureTotalSize: 0,
				expCurrentPage: 1,
				expPageSize: 10,
				expTotalSize: 0,
				tableData: [],
				failureDatas: [],
				expDatas: [],
				sn: [], //设备sn
				activeName: 'failure',
				expStartTime: new Date((date.getTime() - 3600 * 1000 * 24 * 7)).format('yyyy-MM-dd') + ' 00:00:00',
				expEndTime: date.format('yyyy-MM-dd') + ' 23:59:59',
				failureStartTime: new Date((date.getTime() - 3600 * 1000 * 24 * 7)).format('yyyy-MM-dd') + ' 00:00:00',
				failureEndTime: date.format('yyyy-MM-dd') + ' 23:59:59',
				templateObj: {
					DistrictId: this.subArgs.DistrictId,
					CurrentView: this.subArgs.CurrentView
				},
				navDatas: [{
					name: this.subArgs.CurrentView,
					view: ""
				}],
				defaultProps: {
					children: 'Children',
					label: 'Name',
					id: 'Id'
				},
				failureOpreateDatas: [{
					show: true,
					size: "small",
					type: 'primary',
					icon: 'el-icon-eleg-icon_refresh el-icon--left',
					name: this.$t("message.refresh"),
					action: 'reloadFailureDatas'
				},
				{
					show: GloabFun.getUid() == 'admin' ? true : false,
					type: 'danger',
					size: 'small',
					icon: "el-icon-delete2 el-icon--left",
					name: "删除",
					action: "deleteFailureMultiple"
				}
				],
				expOpreateDatas: [{
					show: true,
					size: "small",
					type: 'primary',
					icon: 'el-icon-eleg-icon_refresh el-icon--left',
					name: this.$t("message.refresh"),
					action: 'reloadExpDatas'
				},
				{
					show: GloabFun.getUid() == 'admin' ? true : false,
					type: 'danger',
					size: 'small',
					icon: "el-icon-delete2 el-icon--left",
					name: "删除",
					action: "deleteExpMultiple"
				}
				],
				districtForm: {
					name: '',
					districtid: ''
				},
				multipleFailureSelection: [],
				multipleExpSelection: [],
			};
		},
		props: {
			subArgs: {
				type: Object,
				default: function() {
					return {};
				}
			}
		},
		methods: {
			executeAction(action) {
				if(action) {
					this[action]();
				}
			},
			backPrev() {
				this.$emit('backPrev');
			},
			backNav(item) {},
			//tab切换触发
			handleClick(tab) {
				if(tab.name === "failure") {
					this.getFailure();
				} else {
					this.getAppException();
				}
			},
			//点击某个区域节点
			handleNodeClick(data) {
				// console.log('data',data);
				let vm = this;
				this.districtForm.name = data.Name;
				HttpServer.httpPost.call(this, '/Api/District/GetDevices', {
					districtid: data.DistrictKeyId,
					userKeyId: GloabFun.getKeyId(),
					category: [],
					model: []
					// index: this.currentPage,
					// pagesize: this.pageSize
				}, function(res) {}, function(res) {
					// console.log('区域下的设备', res);
					this.tableData = res.data.info;
					var item = {
						name: '全部',
						sn: '',
					}
					this.tableData.unshift(item);
					this.failureDevice = this.tableData[0].sn;
					this.ExpDevice = this.tableData[0].sn;
					this.sn = [];
					res.data.info.forEach(function(item) {
						vm.sn.push(item.sn);
					});
					this.getFailure();
					this.getAppException();
				});
			},
			//改变设备故障页码
			handleFailureCurrentChange(val) {
				this.failureCurrentPage = val;
				this.getFailure();
			},
			handleFailureSizeChange(val) {
				this.failurePageSize = val;
				this.getFailure();
			},
			handleExpCurrentChange(val) {
				this.expCurrentPage = val;
				this.getAppException();
			},
			handleExpSizeChange(val) {
				this.expPageSize = val;
				this.getAppException();
			},
			//通过关键字查找故障记录
			getByFailureKeyWord() {
				this.getFailure();
			},
			//查询设备故障记录
			getFailure() {
				this.loading = true;
				if(this.failureDevice == '') {
					var param = {
						index: this.failureCurrentPage,
						pagesize: this.failurePageSize,
						sn: this.sn,
						begin: this.failureStartTime,
						end: this.failureEndTime,
						type: 2,
						filter: this.failureKeyWord
					}
				} else {
					var param = {
						index: this.failureCurrentPage,
						pagesize: this.failurePageSize,
						sn: [this.failureDevice],
						begin: this.failureStartTime,
						end: this.failureEndTime,
						type: 2,
						filter: this.failureKeyWord
					}
				}
				HttpServer.httpPost.call(this, '/Api/Device/Failure', param, function(response) {}, function(response) {
					this.loading = false;
					// console.log('故障信息',response);
					if(response.data.code === 0) {
						this.failureDatas = response.data.failure;
						this.failureTotalSize = response.data.totalcount;
					} else {
						this.$notify.error({
							title: '错误',
							message: response.data.msg,
							duration: 2500
						});
					}
				});
			},
			//刷新设备故障记录
			reloadFailureDatas() {
				this.loading = true;
				if(this.failureDevice == '') {
					var param = {
						index: this.failureCurrentPage,
						pagesize: this.failurePageSize,
						sn: this.sn,
						begin: this.failureStartTime,
						end: this.failureEndTime,
						type: 2,
						filter: this.failureKeyWord
					}
				} else {
					var param = {
						index: this.failureCurrentPage,
						pagesize: this.failurePageSize,
						sn: [this.failureDevice],
						begin: this.failureStartTime,
						end: this.failureEndTime,
						type: 2,
						filter: this.failureKeyWord
					}
				}
				HttpServer.httpPost.call(this, '/Api/Device/Failure', param, function(response) {}, function(response) {
					this.loading = false;
					if(response.data.code === 0) {
						this.failureDatas = response.data.failure;
						this.failureTotalSize = response.data.totalcount;
						this.$notify({
							title: '成功',
							message: this.$t('message.refreshSuccess'),
							type: 'success',
							duration: 2500
						});
					} else {
						this.$notify.error({
							title: '错误',
							message: response.data.msg,
							duration: 2500
						});
					}
				});
			},
			//选择单个设备进行故障查询
			selectFailureDevice() {
				// console.log(this.failureDevice);
				this.getFailure();
			},
			getByExceptionKeyWord(){
				this.getAppException();
			},
			//查询应用异常信息
			getAppException() {
				this.loading = true;
				if(this.ExpDevice == '') {
					var param = {
						index: this.expCurrentPage,
						pagesize: this.expPageSize,
						sn: this.sn,
						begin: this.expStartTime,
						end: this.expEndTime,
						type: 2,
						filter: this.exceptionKeyWord
					}
				} else {
					var param = {
						index: this.expCurrentPage,
						pagesize: this.expPageSize,
						sn: [this.ExpDevice],
						begin: this.expStartTime,
						end: this.expEndTime,
						type: 2,
						filter: this.exceptionKeyWord
					}
				}
				HttpServer.httpPost.call(this, '/Api/Device/AppException', param, function(response) {}, function(response) {
					this.loading = false;
					// console.log('应用异常信息',response)
					if(response.data.code === 0) {
						this.expDatas = response.data.exp;
						this.expTotalSize = response.data.totalcount;
					} else {
						this.$notify.error({
							title: '错误',
							message: response.data.msg,
							duration: 2500
						});
					}
				});
			},
			//刷新应用异常信息
			reloadExpDatas() {
				this.loading = true;
				if(this.ExpDevice == '') {
					var param = {
						index: this.expCurrentPage,
						pagesize: this.expPageSize,
						sn: this.sn,
						begin: this.expStartTime,
						end: this.expEndTime,
						type: 2,
						filter: this.exceptionKeyWord
					}
				} else {
					var param = {
						index: this.expCurrentPage,
						pagesize: this.expPageSize,
						sn: [this.ExpDevice],
						begin: this.expStartTime,
						end: this.expEndTime,
						type: 2,
						filter: this.exceptionKeyWord
					}
				}
				HttpServer.httpPost.call(this, '/Api/Device/AppException', param, function(response) {}, function(response) {
					this.loading = false;
					if(response.data.code === 0) {
						this.expDatas = response.data.exp;
						this.expTotalSize = response.data.totalcount;
						this.$notify({
							title: '成功',
							message: this.$t('message.refreshSuccess'),
							type: 'success',
							duration: 2500
						});
					} else {
						this.$notify.error({
							title: '错误',
							message: response.data.msg,
							duration: 2500
						});
					}
				})
			},
			//选择单个设备进行异常查询
			selectExpDevice() {
				this.getAppException();
			},
			handleFailureSelectionChange(val) {
				this.multipleFailureSelection = val;
			},
			formateFailureSelection() {
				var result = [],
				array = this.multipleFailureSelection;
				for(var i = 0; i < array.length; i++) {
					result.push(array[i].id)
				}
				return result;
			},
			//批量删除设备故障
			deleteFailureMultiple() {
				if(this.formateFailureSelection().length > 0) {
					this.$confirm('此操作将永久删除该故障记录，是否继续?', '提示', {
						confirmButtonText: this.$t('message.yes'),
						cancelButtonText: this.$t('message.no'),
						type: 'warning'
					}).then(() => {
						HttpServer.httpPost.call(this, '/api/device/delete/failure', {
							id: this.formateFailureSelection()
						}, function(response) {}, function(response) {
							if(response.data.code === 0) {
								this.getFailure();
								this.$notify({
									title: '成功',
									message: this.$t('message.bulkDeleteSuccess'),
									type: 'success',
									duration: 2500
								});
							} else {
								this.$notify.error({
									title: '错误',
									message: response.data.msg,
									duration: 2500
								});
							}
						});
					}).catch(() => {
						this.$notify.info({
							title: '消息',
							message: this.$t('message.cancleOperation'),
							duration: 2500
						})
					});
				} else {
					this.$notify({
						title: this.$t('message.warning'),
						message: this.$t('message.selectBulkDeleteWarning'),
						type: 'warning',
						duration: 2500
					});
				}
			},
			handleExpSelectionChange(val) {
				this.multipleExpSelection = val;
			},
			formateExpSelection() {
				var result = [],
				array = this.multipleExpSelection;
				for(var i = 0; i < array.length; i++) {
					result.push(array[i].id)
				}
				return result;
			},
			//批量删除应用异常记录
			deleteExpMultiple() {
				if(this.formateExpSelection().length > 0) {
					this.$confirm('此操作将永久删除该应用异常记录，是否继续?', '提示', {
						confirmButtonText: this.$t('message.yes'),
						cancelButtonText: this.$t('message.no'),
						type: 'warning'
					}).then(() => {
						HttpServer.httpPost.call(this, '/api/device/delete/appException', {
							id: this.formateExpSelection()
						}, function(response) {}, function(response) {
							if(response.data.code === 0) {
								this.getAppException();
								this.$notify({
									title: '成功',
									message: this.$t('message.bulkDeleteSuccess'),
									type: 'success',
									duration: 2500
								});
							} else {
								this.$notify.error({
									title: '错误',
									message: response.data.msg,
									duration: 2500
								});
							}
						});
					}).catch(() => {
						this.$notify.info({
							title: '消息',
							message: this.$t('message.cancleOperation'),
							duration: 2500
						})
					});
				} else {
					this.$notify({
						title: this.$t('message.warning'),
						message: this.$t('message.selectBulkDeleteWarning'),
						type: 'warning',
						duration: 2500
					});
				}
			},
			//选择应用异常开始时间
			changeExpStartTime(val) {;
				this.expStartTime = val + ' 00:00:00';
				this.getAppException();
			},
			//选择结束时间
			changeExpEndTime(val) {
				this.expEndTime = val + ' 23:59:59';
				this.getAppException();
			},
			//选择故障异常开始时间
			changeFailureStartTime(val) {
				this.failureStartTime = val + ' 00:00:00';
				this.getFailure();
			},
			//选择故障异常结束时间
			changeFailureEndTime(val) {
				this.failureEndTime = val + ' 23:59:59';
				this.getFailure();
			},
			sortDatas(arr) {
				for(var i=0;i<arr.length;i++){
					for(var j = i + 1;j<arr.length;j++){
						if(arr[i].DistrictKeyId>arr[j].DistrictKeyId){
							var tmp = arr[i];
							arr[i] = arr[j];
							arr[j] = tmp;
						}
					}
				}
				return arr;
			},
			//查询设备信息
			getDatas() {
				let vm = this;
				HttpServer.httpGet.call(this, '/Api/District/districtTree?uid=' + GloabFun.getKeyId(), function(response) {}, function(response) {
					// console.log('获取当前用户的所有绑定区域信息', response)
					// console.log('keyid', GloabFun.getKeyId());
					if(response.data.code === 0) {
						if(response.data.info.length > 0) {
							this.districtsDatas = this.sortDatas(response.data.info);
							this.defaultExpandedKeys.push(this.districtsDatas[0].DistrictKeyId);
							this.currentNodeKey = this.districtsDatas[0].DistrictKeyId;
							//默认查询第一个区域下的设备
							this.districtForm.name = this.districtsDatas[0].Name;
							this.districtForm.districtid = this.districtsDatas[0].DistrictKeyId;
							HttpServer.httpPost.call(this, '/Api/District/GetDevices', {
								districtid: this.districtsDatas[0].DistrictKeyId,
								userKeyId: GloabFun.getKeyId(),
								category: [],
								model: []
								// index: this.currentPage,
								// pagesize: this.pageSize
							}, function(res) {}, function(res) {
								// console.log('区域下的设备', res);
								res.data.info.forEach(function(item) {
									vm.sn.push(item.sn);
								});
								this.tableData = res.data.info;
								var item = {
									name: '全部',
									sn: '',
								}
								this.tableData.unshift(item);
								this.failureDevice = this.tableData[0].sn;
								this.ExpDevice = this.tableData[0].sn;
								//查找第一个区域下的设备对应的故障信息
								this.getFailure();
							});
						}
					} else {
						this.$notify.error({
							title: '错误',
							message: response.data.msg,
							duration: 2500
						});
					}
				});
			}
		},
		created() {
			this.getDatas();
		}
	}
</script>
<style lang="less">
	.flex-inline {
		display: flex;
		justify-content: space-between;
		.set-time {
			display: flex;
			align-items: center;
			justify-content: space-between;
		}
	}
	
	.el-date-editor.el-input {
		width: 130px;
	}
	
	.device-list {
		width: 30%;
		float: left;
		height: e("calc(100% - 35px)");
		margin-bottom: 10px;
		margin-left: 5px;
	}
	
	.operation-list {
		width: 83%;
		float: right;
		height: e("calc(100% - 35px)");
		margin-bottom: 10px;
		padding-top: 0;
		margin-right: 5px;
	}
	
	.list {
		height: 500px;
		// max-height:480px;
		width: 13%;
		float: left;
		overflow: auto;
		// padding-top: 10px;
		margin-bottom: 10px;
		.panel_title {
			height: 28px;
			line-height: 28px;
			font-size: 15px;
			text-align: center;
			border: 1px solid #E0E0E0;
			border-radius: 5px;
			color: #fff;
			background-color: #324157;
		}
		// color:#fff
	}
</style>